HTML Web Workers API

ஒரு வலைப் பணியாளர் என்பது பக்கத்தின் செயல்திறனை பாதிக்காமல் பின்னணியில் இயங்கும் வெளிப்புற JavaScript கோப்பு ஆகும்.

வலைப் பணியாளர் என்றால் என்ன?

ஒரு HTML பக்கத்தில் ஸ்கிரிப்ட்களை இயக்கும் போது, ஸ்கிரிப்ட் முடியும் வரை பக்கம் பதிலளிக்காததாக மாறும்.

ஒரு வலைப் பணியாளர் என்பது பக்கத்தின் செயல்திறனை பாதிக்காமல், பிற ஸ்கிரிப்ட்களிடமிருந்து சுயாதீனமாக பின்னணியில் இயங்கும் வெளிப்புற JavaScript கோப்பு ஆகும். வலைப் பணியாளர் பின்னணியில் இயங்கும் போது, நீங்கள் எதையும் செய்யலாம்: கிளிக் செய்தல், விஷயங்களைத் தேர்ந்தெடுத்தல் போன்றவை.

வலைப் பணியாளர்கள் முக்கிய நூலில் இயக்க முடியாத கனரக குறியீட்டிற்கு பயனுள்ளதாக இருக்கும், இது பக்கத்தை பதிலளிக்காததாக மாற்றும் நீண்ட பணிகளை ஏற்படுத்தாது.

உலாவி ஆதரவு

அட்டவணையில் உள்ள எண்கள் வலைப் பணியாளர்கள் API ஐ முழுமையாக ஆதரிக்கும் முதல் உலாவி பதிப்பைக் குறிக்கின்றன.

API	Chrome	Edge	Firefox	Safari	Opera
Web Workers	4.0	10.0	3.5	4.0	11.5

வலைப் பணியாளர்கள் API எடுத்துக்காட்டு

கீழே உள்ள எடுத்துக்காட்டு பின்னணியில் எண்களை எண்ணும் ஒரு எளிய வலைப் பணியாளரை உருவாக்குகிறது:

எண்களை எண்ணுங்கள்:

பணியாளர் முடிவு இங்கே காட்டப்படும்...

குறிப்பு:

பொதுவாக வலைப் பணியாளர்கள் இவ்வளவு எளிய ஸ்கிரிப்ட்களுக்குப் பயன்படுத்தப்படுவதில்லை, ஆனால் மிகவும் CPU தீவிரமான பணிகளுக்குப் பயன்படுத்தப்படுகின்றன!

வலைப் பணியாளர் API ஆதரவை சோதிக்கவும்

வலைப் பணியாளரைப் பயன்படுத்துவதற்கு முன், உலாவி ஆதரவை விரைவாக சரிபார்க்கலாம்:

எடுத்துக்காட்டு

<script>
const x = document.getElementById("result");
if(typeof(Worker) !== "undefined") {
  x.innerHTML = "Your browser support Web Workers!";
} else {
  x.innerHTML = "Sorry, your browser does not support Web Workers.";
}
</script>

உங்கள் உலாவி ஆதரவை சோதிக்கவும்:

இங்கே முடிவு காட்டப்படும்...

.js வலைப் பணியாளர் கோப்பை உருவாக்குதல்

இப்போது, ஒரு வெளிப்புற JavaScript கோப்பில் ஒரு வலைப் பணியாளரை உருவாக்குவோம்.

இங்கே நாம் எண்ணும் ஒரு ஸ்கிரிப்டை உருவாக்குகிறோம். ஸ்கிரிப்ட் "demo_workers.js" கோப்பில் சேமிக்கப்பட்டுள்ளது:

var i = 0;

function timedCount() {
  i = i + 1;
  postMessage(i);
  setTimeout("timedCount()",500);
}

timedCount();

குறிப்பு:

மேலே உள்ள குறியீட்டின் முக்கிய பகுதி postMessage() முறையாகும் - இது HTML பக்கத்திற்கு செய்திகளை இடுகையிட பயன்படுகிறது.

வலைப் பணியாளர் பொருளை உருவாக்குதல்

.js வலைப் பணியாளர் கோப்பை உருவாக்கிய பிறகு, அதை ஒரு HTML பக்கத்திலிருந்து அழைக்கலாம்.

பின்வரும் வரிகள் ஒரு பணியாளர் (w) ஏற்கனவே உள்ளதா எனச் சரிபார்க்கின்றன, இல்லையெனில் - இது ஒரு புதிய வலைப் பணியாளர் பொருளை உருவாக்கி .js கோப்பை சுட்டிக்காட்டுகிறது: "demo_workers.js":

எடுத்துக்காட்டு

if (typeof(w) == "undefined") {
  w = new Worker("demo_workers.js");
}

பின்னர் நாம் வலைப் பணியாளரிடமிருந்து செய்திகளை அனுப்பலாம் மற்றும் பெறலாம்.

தரவு வலைப் பணியாளர்கள் மற்றும் முக்கிய நூல் இடையே செய்திகளின் முறைமை மூலம் அனுப்பப்படுகிறது - இரு தரப்பினரும் தங்கள் செய்திகளை postMessage() முறையைப் பயன்படுத்தி அனுப்புகின்றனர், மேலும் onmessage நிகழ்வு கையாளி மூலம் செய்திகளுக்கு பதிலளிக்கின்றனர்.

வலைப் பணியாளர் பொருளுக்கு ஒரு onmessage நிகழ்வு கேட்பியைச் சேர்க்கவும்.

எடுத்துக்காட்டு

w.onmessage = function(event){
  document.getElementById("result").innerHTML = event.data;
};

.js இல் உள்ள வலைப் பணியாளர் ஒரு செய்தியை இடுகையிடும் போது, நிகழ்வு கேட்பியிற்குள் உள்ள குறியீடு இயக்கப்படுகிறது. வலைப் பணியாளரிலிருந்து தரவு event.data இல் சேமிக்கப்படுகிறது.

வலைப் பணியாளரை முடித்தல்

ஒரு வலைப் பணியாளர் பொருள் உருவாக்கப்படும் போது, அது முடிக்கப்படும் வரை செய்திகளைக் கேட்கத் தொடர்கிறது.

ஒரு வலைப் பணியாளர் பொருளை முடிக்க, மற்றும் உலாவி/கணினி வளங்களை விடுவிக்க, terminate() முறையைப் பயன்படுத்தவும்:

எடுத்துக்காட்டு

w.terminate();

வலைப் பணியாளரை மீண்டும் பயன்படுத்துதல்

வலைப் பணியாளர் மாறியை முடிக்கப்பட்ட பிறகு வரையறுக்கப்படாததாக அமைத்தால், நீங்கள் பணியாளர்/குறியீட்டை மீண்டும் பயன்படுத்தலாம்:

எடுத்துக்காட்டு

w = undefined;

முழு வலைப் பணியாளர் எடுத்துக்காட்டு

நாங்கள் ஏற்கனவே .js கோப்பில் வலைப் பணியாளர் குறியீட்டைப் பார்த்துள்ளோம்.

HTML பக்கத்திற்கான முழு குறியீடு கீழே உள்ளது:

எடுத்துக்காட்டு

<!DOCTYPE html>
<html>
<body>

<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>

<script>
let w;

function startWorker() {
  const x = document.getElementById("result");
  if (typeof(Worker) !== "undefined") {
    if (typeof(w) == "undefined") {
      w = new Worker("demo_workers.js");
    }
    w.onmessage = function(event) {
      x.innerHTML = event.data;
    };
  } else {
    x.innerHTML = "Sorry! No Web Worker support.";
  }
}

function stopWorker() {
  w.terminate();
  w = undefined;
}
</script>

</body>
</html>

வலைப் பணியாளர்கள் மற்றும் DOM

வலைப் பணியாளர்கள் வெளிப்புற .js கோப்புகளில் இருப்பதால், அவர்களுக்கு பின்வரும் JavaScript பொருள்களுக்கான அணுகல் இல்லை:

window பொருள்

அணுக முடியாது

document பொருள்

அணுக முடியாது

parent பொருள்

அணுக முடியாது

கவனிக்க:

வலைப் பணியாளர்கள் DOM ஐ நேரடியாக மாற்ற முடியாது. அவர்கள் முக்கிய நூலுடன் செய்தி பரிமாற்றம் மூலம் தொடர்பு கொள்ள வேண்டும்.

முக்கிய நூல் vs வலைப் பணியாளர்

முக்கிய நூல்

UI இடைமுகத்தை கையாளுகிறது
DOM க்கு அணுகல் உள்ளது
பயனர் தொடர்புகளுக்கு பதிலளிக்கிறது
நீண்ட பணிகள் பக்கத்தை முடக்கலாம்
உடனடி கையாளுதலுக்கு ஏற்றது

வலைப் பணியாளர்

பின்னணியில் இயங்குகிறது
DOM க்கு அணுகல் இல்லை
பயனர் தொடர்புகளைத் தொந்தரவு செய்யாது
கனரக கணக்கீடுகளைக் கையாளுகிறது
தரவு செயலாக்கத்திற்கு ஏற்றது

பயிற்சி

❓ பின்வரும் எந்த JavaScript பொருள் வலைப் பணியாளர்களால் நேரடியாக அணுக முடியாது?

Math object

✗ தவறு! Math object வலைப் பணியாளர்களால் அணுக முடியும்

document object

✓ சரி! document object வலைப் பணியாளர்களால் அணுக முடியாது

Array object

✗ தவறு! Array object வலைப் பணியாளர்களால் அணுக முடியும்